<!--创建新的课题活动-->
<template>
  <div class="wrapper-container">
    <div class="search-container">
      <div class="search-button color-primary width130" @click="addNew()">
        <img src="../../../assets/classHours/icon-addBig.png" alt="" />
        <span>创建新活动</span>
      </div>
      <div class="flex">
        <div class="search-button btn1" @click="xfOrGbBtn(true)">
          <span>下发课题活动</span>
        </div>
        <div class="search-button btn1" @click="xfOrGbBtn(false)">
          <span>关闭课题活动</span>
        </div>
      </div>
    </div>
    <div class="table-container table-css">
        <el-table :data="tableData" border style="width: 100%" class="table-data" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}"  @selection-change="handleSelectionChange">
            <el-table-column type="selection"  width="55" align="center"></el-table-column>
            <el-table-column prop="subActivityName" label="创建新活动" align="center" min-width="200">
              <div slot-scope="scope" class="table-edit">
                {{scope.row.subActivityName}}<img src="../../../assets/assessment/icon-plan-record-detail.png" @click="addNew(scope.row)">
              </div>
            </el-table-column>
            <el-table-column prop="subCategoryName" label="活动所属类别" align="center" min-width="150"> </el-table-column>
            <el-table-column label="类别所属环节" align="center" min-width="600">
                <div class="btn-css" slot-scope="scope">
                    <div v-for="item in scope.row.acStageList" :key="item.acScsId" style="margin-right: 20px;">
                      <div style="display: flex;align-items: center;">
                        <h1>{{item.acScsName}}</h1>
                        <span class="small-btn color-green" @click="setting(scope.row,item.acScsId)">
                            <img src="../../../assets/assessment/icon-set-green.png"> 设置
                        </span>
                      </div>
                      <h2 :class="{'disabled':isDisabled}">截止时间：{{item.acScsEndDate}}</h2>
                    </div>
                </div>
            </el-table-column>
        </el-table>
        <h1 class="total-notice">当前共找到{{total}}条记录，当前显示{{(dataForm.pageNo-1)*50 == 0?1:(dataForm.pageNo-1)*50}}-{{total>50?dataForm.pageNo*50:total}}条</h1>
        <div class="pagination-block">
            <el-pagination v-if="total>50" prev-text="上一页" next-text="下一页" @current-change="currentPage"
            :page-size="50" layout="prev, pager, next, jumper" :total="total"></el-pagination>
        </div>
    </div>
    <!-- 创建新活动 -->
    <el-dialog title="创建新活动" :visible.sync="dialogAdd" :close-on-click-modal="false" width="50%">
      <div class="my-form-container" style="height:182px;width:80%">
        <el-form ref="v" :model="addForm" class="demo-ruleForm">
          <el-row class="my-form-item">
            <el-col :span="24">
              <div class="my-form-item-label" >创建新活动</div>
              <el-form-item  prop="studentName">
                <div class="my-form-item-value">
                  <el-input v-model="addForm.subActivityName" class="width326"></el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="my-form-item">
            <el-col :span="24">
              <div class="my-form-item-label" >活动所属类别</div>
              <el-form-item  prop="studentName">
                <div class="my-form-item-value">
                  <el-select class="width326" v-model="addForm.subCategoryId" @change="choseType">
                   <el-option v-for="item in typeList" :key="item.subCategoryId" :label="item.subCategoryName" :value="item.subCategoryId"></el-option>
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="my-form-item" style="border-bottom: none;">
            <el-col :span="24">
              <div class="my-form-item-label" >类别所属环节</div>
              <div class="my-form-item-value">
                <span class="right10" v-for="item in lbhj" :key="item.scsId">{{item.scsName}}</span>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="button-group" slot="footer" style="margin-top:0">
          <div class="" @click="saveNew">保存</div>
          <div class="" @click="dialogAdd=false">取消</div>
        </div>
    </el-dialog>
    <!-- 设置 -->
    <el-dialog title="设置" :visible.sync="dialogSet" :close-on-click-modal="false" width="80%">
      <div class="table-container table-css setTable">
        <el-table :data="settingData" border style="width: 100%" class="table-data" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}" :cell-class-name="cellClsNm">
          <el-table-column prop="acScsName" label="类别所属环节" align="center" min-width="120"></el-table-column>
          <el-table-column prop="acScsEndDate" label="截止时间设置" align="center" min-width="120"> 
              <template slot-scope="scope">
                  <el-date-picker class="time" v-model="scope.row.acScsEndDate" type="date" value-format="yyyy-MM-dd"></el-date-picker>
              </template>
          </el-table-column>
          <el-table-column prop="count" label="表单选择" align="center" min-width="250"> 
              <div slot-scope="scope">
                <div v-for="i in scope.row.subjectAcStageResources" :key="i.acResourceId" class="line">
                  <el-checkbox v-model="i.acAvailable" @change="changeBox">{{i.acResourceName}}</el-checkbox>
                </div>
              </div>
          </el-table-column>
          <el-table-column prop="count" label="表单命名" align="center" min-width="150">
              <div slot-scope="scope">
                <div v-for="item in scope.row.subjectAcStageResources" :key="item.acResourceId" class="line">
                  <el-input v-model="item.acResourceActualName"></el-input>
                </div>
              </div>
          </el-table-column>
        </el-table>
      </div>
      <div class="button-group" slot="footer">
        <div class="" @click="saveSet">保存</div>
        <div class="" @click="dialogSet=false">取消</div>
      </div>
    </el-dialog>
    <!-- 提示 -->
    <el-dialog title="提 示" :visible.sync="dialogNotice" :close-on-click-modal="false">
      <div class="notice-css">
        <h1>您确定**课题活动{{xfType?'下发':'关闭'}}吗？</h1>
      </div>
      <div class="button-group notice-btn" slot="footer">
        <div class="" @click="saveNotice">确定</div>
        <div class="" @click="dialogNotice=false">取消</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getActivityList,addActivity,xfORClose,setting,settingSave} from "@/api/teachingTopic";

export default {
  data() {
    return {
      dialogAdd:false,
      dialogSet:false,
      dialogNotice:false,
      xfType:true,
      settingData:[],
      total:1,
      isDisabled:true,
      typeList:[],
      dataForm:{
        pageNo:1,
        pageSize:50
      },
      addForm:{
        subActivityName:'',
        subActivityId:'',
        subCategoryId:'',
      },
      tableData: [],
      editBtn:true,
      IDS:[], 
      lbhj:[],
    };
  },
  components:{
  },
  mounted(){
    this.initList();
    this.commonApi.getAllType({}).then(res=>{
      this.typeList = res.data
    })
    
  },
  methods: {
    handleSelectionChange(e){
      this.IDS = e.map(item=>item.subActivityId)
    },
    //初始化表格
    async initList(){
      let res = await getActivityList(this.dataForm);
      if(res.code == 200){
        this.tableData = res.data.records;
        this.total = res.data.total
      }
    },
    changeBox(e){
      console.log(e)
    },
    cellClsNm({column}){
      if(column.label == '表单选择' || column.label=='表单命名'){
        return 'miss-padding'
      }
    },
    //编辑
    edit(){
      this.isAdd = false
      this.editBtn = false;
    },
    addNew(row){
        this.dialogAdd = true;
        if(row){
          this.addForm.subActivityName = row.subActivityName;
          this.addForm.subCategoryId = row.subCategoryId;
          this.choseType(row.subCategoryId)
        }else{
          Object.assign(this.addForm,this.$options.data().addForm);
          this.lbhj = []
        }
    },
    async saveNew(){
      let res = await addActivity(this.addForm);
      if(res.code == 200){
        this.dialogAdd = false;
        this.initList()
      }
    },
    choseType(e){
      this.lbhj = this.typeList.filter(item=>item.subCategoryId == e)[0].stagesRes
    },
    async setting(row,acScsId){
      this.dialogSet = true;
      let res = await setting ({acScsId:acScsId,subActivityId:row.subActivityId});
      if(res.code == 200){
        let mes = res.data.subjectAcStageResources.map(item=>{
          let ns = {
            ...item,
            acAvailable:item.acAvailable == 1?true:false
          }
          return ns
        })
        let value = {
          ...res.data,
          subjectAcStageResources:mes,
        }
        this.settingData = [value];
      }
    },
    async saveSet(){
      let mes = this.settingData[0].subjectAcStageResources.map(item=>{
        let ns = {
          ...item,
          acAvailable:item.acAvailable == true?'1':'0'
        }
        return ns
      })
      let value = {
          ...this.settingData[0],
          subjectAcStageResources:mes,
        }
      let res = await settingSave(value);
      if(res.code == 200){
        this.dialogSet = false;
        this.initList()
      }
    },
    //下发或关闭活动
    xfOrGbBtn(type){
      if(this.IDS.length==0){
        if(type==false){
          this.$message.info("请选择需要关闭的课题活动");
        }else{
          this.$message.info("请选择需要下发的课题活动");
        } 
        return;
      }
      this.xfType = type;
      this.dialogNotice = true;
    },
    async saveNotice(){
      //课题活动开关,0:关,1：下发
      let params = {
        subAcSwitch:this.xfType?1:0,
        subActivityIds:this.IDS.join(',')
      }
      let res = await xfORClose(params);
      if(res.code == 200){
        this.dialogNotice = false;
        this.$message.success(res.msg)
        this.initList()
      }
    }
  },
};
</script>
<style lang="less" scoped>
.table-css {
  margin-top: 30px;
 /deep/ .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  /deep/.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }
/deep/.form_dialog .el-table--border td, .el-dialog__wrapper .el-table--border th, .el-dialog__wrapper .el-table--border td{border-right: 1px;}
  /deep/.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }
 /deep/ .el-table__footer-wrapper td {
    padding: 0;
    height: 86px;
  }
  /deep/.el-table thead.is-group th.el-table__cell{
    border-color: #c7d7eb;
  }
 /deep/ .el-table--border th, .el-table__fixed-right-patch{
    border-color: #c7d7eb;
  }
}
</style>
<style lang="less" scoped>
@import "../../../styles/commonCss.less";
.search-container {
  justify-content: space-between !important;
}
/deep/.miss-padding{padding: 0!important;}
/deep/.miss-padding .cell{
    padding-left: 0!important;
    padding-right: 0!important;
}
.setTable{width: 90%;margin: 0 auto 50px;}
.line{
  border-bottom: 1px solid #c7d7eb;
  padding: 20px;
  .el-checkbox{height: 44px;line-height: 44px;}
  &:last-child{border-bottom: none;}
}
.flex{display: flex;}
.width130{width: 130px;}
.disabled{color: #AEAEAE!important;}
.color-green{
  background: #F1FFF8;
  border: 1px solid #02C86C;
  color: #02C86C;
  >img{width: 17px!important;height:17px!important}
}
.btn1{
    border: 1px solid #F3B815;
    color:#F3B815 ;
    background: #FFF6EF;
    width: 100px;
    &:nth-child(1){
        margin-right: 38px;
    }
}
.table-edit{
  display: flex;
  align-items: center;
  word-break: break-all;
  justify-content: center;
  img{
    width: 15px;
    height: 15px;
    margin-left: 10px;
    cursor: pointer;
  }
}
/deep/.my-form-item-label{width: 200px!important;}
.btn-css{
  display: flex;
  height: 66px;
  align-items: center;
  justify-content: center;
    .small-btn{margin: 0;height: 27px;}
    h1{
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 39px;
        color: #004CA7;
        margin-right: 10px;
    }
    h2{
        font-size: 9px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 0px;
        color: #FF3819;
        margin-top:10px;
        text-align: left;
        margin-top: -6px;
    }
}
.right10{margin-right: 10px;}
.width326{width: 250px;}
 /deep/.button-group{
    padding-bottom: 20px;
    margin-top: 0px;
  }
  /deep/.el-dialog__body{
    padding: 30px 20px 0;
  }
  .notice-btn{
    div{
      &:nth-child(2) {
        color: #F3B815;
        border: 1px solid #F3B815;
        background: #FFF6EF;
      }
      &:nth-child(1) {
       color: #02c86c;
       border: 1px solid #02c86c;
       background: #dfffef;
       margin-right: 55px;
      }
    }
  }
  .notice-css{
    h1{
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      line-height: 20px;
      color: #004CA7;
      margin:20px 0 90px;
      text-align: center;
    }
  }
</style>
